<template>
  <n-scrollbar style="height: 300px">
    <div class="plotting-list">
      <template v-for="(item, index) in plottingList">
        <div
          @click="handlePlottingSelect(index)"
          :class="[
            'plotting-item',
            item.name == mapStore.selectPlottingName ? 'active' : '',
          ]"
        >
          <svgIcon size="80px" :name="item.name"></svgIcon>
          <n-ellipsis style="max-width: 100px; margin-top: 12px">
            {{ item.name }}
          </n-ellipsis>
        </div>
      </template>
    </div>
  </n-scrollbar>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import svgIcon from "@/components/svg/index.vue";
const files = import.meta.glob("@/assets/svg/*.svg", { eager: true });
import { useMapStore } from "@/store/map";
const emits = defineEmits(["select"]);
const mapStore = useMapStore();
const plottingList = ref([]);
onMounted(() => {
  // plottingList.value = files.;
  for (let key in files) {
    const splitArr = key.split("/");
    plottingList.value.push({
      name: splitArr[splitArr.length - 1].split(".")[0],
      dir: key,
    });
  }
});
const handlePlottingSelect = (index: number) => {
  mapStore.selectPlottingName = plottingList.value[index].name;
  console.log(
    files[plottingList.value[index].dir],
    plottingList.value[index].dir
  );
  console.log(files[plottingList.value[index].dir]);
  //@ts-ignore
  import(`${files[plottingList.value[index].dir].default}?raw`).then((res) => {
    console.log(res.default);
    mapStore.selectPlottingIcon = res.default;
  });
  // const reader = new FileReader();
  // reader.readAsDataURL(plottingList.value[index].dir);
  // reader.onload = function (e) {
  //   var dataUrl = reader.result;
  //   console.log(dataUrl)
  // };
  // const file = files[plottingList.value[index].dir].then(
  //   (res) => {
  //     console.log(res);
  //   }
  // );
  // console.log(file);
  emits("select", mapStore.selectPlottingName);
};
</script>

<style lang="scss" scoped>
.plotting-list {
  display: flex;
  flex-wrap: wrap;

  .plotting-item {
    width: 120px;
    height: 120px;
    margin: 6px;
    padding: 6px;
    // background-color: rgba(0, 0, 0, 0.3);
    border: 2px dashed rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .active {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .plotting-item:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .plotting-item:active {
    background-color: rgba(0, 0, 0, 0.7);
  }
}
</style>
